<template>
  <el-main>
    <h3>创建机构信息</h3>
    <div class="context">
      <span>基本信息</span><span>注：带有*为必填项</span>
    </div>
    <el-divider />
    <!-- ====================================== -->
    <el-form
      :inline="true"
      :model="formInline"
      class="demo-form-inline"
      require-asterisk-position="right"
    >
      <el-form-item label="机构名称" :rules="{ required: true }">
        <el-input
          class="input"
          v-model="formInline.user"
          placeholder="闽南理工学院图书馆两种效果"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
      <el-form-item label="机构地址" :rules="{ required: true }">
        <el-input
          class="input"
          v-model="formInline.user"
          placeholder="闽南理工学院图书馆两种效果"
        />
      </el-form-item>
      <br />
      <el-form-item label=" 联系人" :rules="{ required: true }">
        <el-input v-model="formInline.user" />
      </el-form-item>
      <br />
      <el-form-item label="  手机" :rules="{ required: true }">
        <el-input v-model="formInline.user" />
      </el-form-item>
      <br />
      <el-form-item label="电话" :rules="{ required: true }">
        <el-input v-model="formInline.user" /> </el-form-item
      ><br />
      <el-form-item label="国家">
        <el-select v-model="formInline.region" placeholder="请选择">
          <el-option label="全部" value="shanghai" />
          <el-option label="编号" value="beijing" />
        </el-select>
      </el-form-item>
      <br />
      <el-form-item label="省份">
        <el-select v-model="formInline.region" placeholder="陕西省">
          <el-option label="全部" value="shanghai" />
          <el-option label="编号" value="beijing" />
        </el-select> </el-form-item
      ><br />
      <el-form-item label="市名">
        <el-select v-model="formInline.region" placeholder="全部">
          <el-option label="全部" value="shanghai" />
          <el-option label="编号" value="beijing" />
        </el-select> </el-form-item
      ><br />
      <el-form-item label="邮编">
        <el-select v-model="formInline.region" placeholder="全部">
          <el-option label="全部" value="shanghai" />
          <el-option label="编号" value="beijing" />
        </el-select> </el-form-item
      ><br />
      <el-form-item label="网站">
        <el-input class="input" v-model="formInline.user" /> </el-form-item
      ><br />
      <el-form-item label="机构级别" :rules="{ required: true }">
        <el-select v-model="formInline.region" placeholder="党政">
          <el-option label="党政军企" value="shanghai" />
          <el-option label="党政军企" value="beijing" />
        </el-select>
      </el-form-item>
      <br />
      <el-form-item label="行业内别" :rules="{ required: true }">
        <el-select v-model="formInline.region" placeholder="党政">
          <el-option label="党政军企" value="shanghai" />
          <el-option label="党政军企" value="beijing" />
        </el-select>
      </el-form-item>
      <br />
      <el-form-item label="重要等级" :rules="{ required: true }">
        <el-select v-model="formInline.region" placeholder="党政">
          <el-option label="一般" value="shanghai" />
          <el-option label="重要" value="beijing" />
        </el-select>
      </el-form-item>
      <br />
      <el-form-item label="单位等级" :rules="{ required: true }">
        <el-select v-model="formInline.region" placeholder="党政">
          <el-option label="一级" value="shanghai" />
          <el-option label="一级" value="beijing" />
        </el-select>
      </el-form-item>
      <br />
      <el-form-item label="区域等级" :rules="{ required: true }">
        <el-select v-model="formInline.region" placeholder="党政">
          <el-option label="省级" value="shanghai" />
          <el-option label="市级" value="beijing" />
        </el-select>
      </el-form-item>

      <!-- ====================== -->
      <!-- ====================== -->

      <div>
        <span>其他信息</span>
      </div>
      <el-divider />
      <el-form-item label="经办人" :rules="{ required: true }">
        <el-input v-model="formInline.user" class="input1" /> </el-form-item
      ><br />
      <el-form-item label="年费" class="input1" :rules="{ required: true }">
        <el-input v-model="formInline.user" /></el-form-item
      >万<br />
      <el-form-item
        label="电子资源经费"
        class="input1"
        :rules="{ required: true }"
      >
        <el-input v-model="formInline.user" /></el-form-item
      >万

      <!-- ========================== -->
      <el-form :model="form" label-width="70px">
        <el-form-item label="采购时间">
          <el-col :span="11">
            <el-date-picker
              class="input1"
              v-model="form.date1"
              type="date"
              placeholder="年/月/日"
              style="width: 100%"
            />
          </el-col>
        </el-form-item>
      </el-form>
      <el-form-item label="采购级别">
        <el-select v-model="formInline.region" placeholder="党政">
          <el-option label="省级" value="shanghai" />
          <el-option label="市级" value="beijing" />
        </el-select> </el-form-item
      ><br />
      <el-form-item label="采购方式">
        <el-select v-model="formInline.region" placeholder="党政">
          <el-option label="省级" value="shanghai" />
          <el-option label="市级" value="beijing" />
        </el-select> </el-form-item
      ><br />
      <el-form-item label="采购途径">
        <el-select v-model="formInline.region" placeholder="党政">
          <el-option label="省级" value="shanghai" />
          <el-option label="市级" value="beijing" />
        </el-select> </el-form-item
      ><br />
      <el-form-item label="分配情况" :rules="{ required: true }">
        <el-select v-model="formInline.region" placeholder="党政">
          <el-option label="省级" value="shanghai" />
          <el-option label="市级" value="beijing" />
        </el-select> </el-form-item
      ><br />
      <el-form-item label="审核状态" :rules="{ required: true }">
        <el-select v-model="formInline.region" placeholder="党政">
          <el-option label="省级" value="shanghai" />
          <el-option label="市级" value="beijing" />
        </el-select> </el-form-item
      ><br />
      <el-form-item label="机构类型" :rules="{ required: true }">
        <el-select v-model="formInline.region" placeholder="党政">
          <el-option label="省级" value="shanghai" />
          <el-option label="市级" value="beijing" />
        </el-select> </el-form-item
      ><br />
      <el-form-item label="跟进状态" :rules="{ required: true }">
        <el-select v-model="formInline.region" placeholder="初访">
          <el-option label="省级" value="shanghai" />
          <el-option label="市级" value="beijing" />
        </el-select> </el-form-item
      ><br />
      <el-form-item label="备注信息">
        <el-input
          v-model="form.desc"
          type="textarea"
          class="remasks"
        /> </el-form-item
      ><br />

      <div class="CancalPostion">
        <el-form-item>
          <el-button type="primary">确认编辑</el-button>
          <el-button>取消</el-button>
        </el-form-item>
      </div>
      <!-- ========================== -->
    </el-form>
  </el-main>
</template>

<script setup>
import { reactive } from "vue";
const formInline = reactive({
  user: "",
});
const onSubmit = () => {
  console.log("submit!");
};

// do not use same name with ref
const form = reactive({
  date1: "",
  date2: "",
});
</script>

<style lang='scss' scoped>
h3 {
  padding: 0;
  text-align: center;
}
.context {
  display: flex;
  justify-content: space-between;
}
.input {
  width: 500px;
}
.input1 {
  width: 300px;
}
.el-input__wrapper {
  width: 400px;
}
.remasks {
  width: 700px;
}
.CancalPostion {
  margin-left: 600px;
}
</style>